<template>
  <div class="container" onkeydown="keyDownFn($event)">
    <leftcont></leftcont>
    <div class="righCont">
      <topcont></topcont>
      <div class="content">
        <div class="formMain">
          <el-descriptions
            v-if="activeItem.user_info"
            title="账号信息"
            :column="4"
            border
          >
            <el-descriptions-item label="账号昵称"
              >{{ activeItem.user_info.nick_name
              }}<span style="color: #f56c6c">*</span></el-descriptions-item
            >
            <el-descriptions-item label="累计消费">- -</el-descriptions-item>
            <el-descriptions-item label="实名认证">
              <el-tag v-if="activeItem.enterprise_status == 2">已认证</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="开通会员">
              <el-tag v-if="activeItem.is_member == 1">未开通</el-tag>
              <el-tag v-if="activeItem.is_member == 2">已开通</el-tag>
              <el-tag v-if="activeItem.is_member == 3">已到期</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="到期时间">{{
              activeItem.member_time
            }}</el-descriptions-item>
            <el-descriptions-item label="投递岗位">- -</el-descriptions-item>
            <el-descriptions-item label="申请接单">- -</el-descriptions-item>
            <el-descriptions-item label="累计中标">- -</el-descriptions-item>
          </el-descriptions>
          <el-descriptions style="margin-top: 20px" title="简历信息" border>
            <el-descriptions-item label="真实姓名">{{
              activeItem.real_name
            }}</el-descriptions-item>
            <el-descriptions-item label="出生日期">{{
              activeItem.date_of_birth
            }}</el-descriptions-item>
            <el-descriptions-item label="职业方向">{{
              activeItem.career_path
            }}</el-descriptions-item>
            <el-descriptions-item label="微信号">{{
              activeItem.wechat
            }}</el-descriptions-item>
            <el-descriptions-item label="手机号">{{
              activeItem.mobile
            }}</el-descriptions-item>
            <el-descriptions-item label="邮箱地址">{{
              activeItem.email
            }}</el-descriptions-item>
            <el-descriptions-item label="工作经验">{{
              activeItem.work_experience
            }}</el-descriptions-item>
            <el-descriptions-item label="工作状态">{{
              activeItem.work_status
            }}</el-descriptions-item>
            <el-descriptions-item span="2" label="工作时间">
              <span :key="b" v-for="(a, b) in activeItem.work_time">
                <span v-if="b > 0">，</span>
                {{ a.name }}
              </span>
            </el-descriptions-item>
            <el-descriptions-item label="工作城市">{{
              activeItem.work_address
            }}</el-descriptions-item>
            <el-descriptions-item label="期望日薪">{{
              activeItem.salary_day
            }}</el-descriptions-item>
            <el-descriptions-item label="简历状态">
              <el-tag v-if="activeItem.biographical_notes_status == 1"
                >禁用</el-tag
              >
              <el-tag v-if="activeItem.biographical_notes_status == 2"
                >正常</el-tag
              >
            </el-descriptions-item>
            <el-descriptions-item label="创建时间">{{
              activeItem.create_time
            }}</el-descriptions-item>
            <el-descriptions-item label="更新时间">{{
              activeItem.update_time
            }}</el-descriptions-item>
            <el-descriptions-item label="审核时间">{{
              activeItem.examine_time
            }}</el-descriptions-item>
          </el-descriptions>
          <div class="formHead">自我评价</div>
          <div>{{ activeItem.introduce }}</div>
          <div class="formHead">技能评价</div>
          <div
            class="skillItem"
            :key="index"
            v-for="(item, index) in activeItem.skill"
          >
            <div class="skillName">{{ item.name }}</div>
            <div class="skillLine">
              <el-progress
                :text-inside="true"
                :stroke-width="15"
                :percentage="item.value"
              />
            </div>
          </div>
          <div class="formHead">工作经历</div>
          <div class="workCont">
            <div
              class="compItem"
              :key="index"
              v-for="(item, index) in activeItem.work_undergo"
            >
              <div class="compName">
                <div>{{ item.company_name }}-{{ item.position }}</div>
                <div class="compTagItem">
                  <div class="iconfont icon-shijian"></div>
                  <div>{{ item.start_time }} ～ {{ item.end_time }}</div>
                </div>
              </div>
              <div class="compDes">
                {{ item.work_content }}
              </div>
            </div>
          </div>
          <div class="formHead">作品案例</div>
          <div
            class="productCont"
            :key="index"
            v-for="(item, index) in activeItem.works_case"
          >
            <div class="productHead">
              <div>{{ item.works_name }}</div>
            </div>
            <div class="productDes">项目地址：{{ item.works_url }}</div>
            <div class="productDes">
              {{ item.works_content }}
            </div>
            <div class="productImg">
              <bigImg :propImg="item.productImg"></bigImg>
            </div>
          </div>
          <div class="formHead">教育经历</div>
          <div class="workCont">
            <div
              class="workItem"
              :key="index"
              v-for="(item, index) in activeItem.education_undergo"
            >
              <div class="compName">
                <div>{{ item.school_name }}</div>
              </div>
              <div class="compTag">
                <div class="compTagItem">
                  <div class="iconfont icon-shenfenzheng"></div>
                  <div>{{ item.education }}</div>
                </div>
                <div class="compTagItem">
                  <div class="iconfont icon-shijian"></div>
                  <div>{{ item.start_time }} ～ {{ item.end_time }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import leftcont from "@/components/leftCont.vue";
import topcont from "@/components/topCont.vue";
import bigImg from "@/components/public/bigImg.vue";
import btn from "@/components/public/btn.vue";
import { bookDetails } from "@/http/api";

export default {
  components: { bigImg, leftcont, topcont, btn },
  data() {
    return {
      activeItem: {},
    };
  },
  props: {},
  methods: {
    getdata() {
      var data = {
        biographical_notes_id: this.$route.query.id,
      };
      bookDetails(data)
        .then((res) => {
          if (res.data.code == 1) {
            this.activeItem = this.setProductImg(res.data.data);
          } else {
            ElMessage(res.data.msg);
          }
        })
        .catch((err) => {
          ElMessage("服务器请求超时");
        });
    },
    setProductImg(item) {
      // 作品案例
      this.productArr = [];
      for (let i = 0; i < item.works_case.length; i++) {
        let imgArr = item.works_case[i].works_img.split(",");
        item.works_case[i]["productImg"] = imgArr;
        item.works_case[i]["imgUrl"] = imgArr[0];
      }
      return item;
    },
  },
  mounted() {},
  created() {
    this.getdata();
  },
};
</script>

<style scoped lang="less">
.container {
  width: 100%;
  display: flex;
  height: 100vh;
  overflow: hidden;
  .righCont {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-left: 15px;
    height: 100%;
    width: 10px;
    background-color: #f4f8ff;
    .content {
      padding: 20px;
      box-sizing: border-box;
      width: 100%;
      flex: 1;
      overflow: auto;
      .formMain {
        padding: 20px;
        background: #fff;
        box-sizing: border-box;
        .skillItem {
          display: flex;
          align-items: center;
          .skillName {
            width: 100px;
            margin-right: 15px;
            text-align: right;
          }
          .skillLine {
            flex: 1;
          }
        }
        .workCont {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          flex-wrap: wrap;
          .compItem,
          .workItem {
            width: 100%;
            padding: 15px 4%;
            box-sizing: border-box;
            background: #f1f4fb;
            border-radius: 5px;
            margin-bottom: 10px;
            .compName {
              font-weight: bold;
              display: flex;
              align-items: center;
              margin-bottom: 5px;
              justify-content: space-between;
              .compTagItem {
                display: flex;
                align-items: center;
                .iconfont {
                  font-size: 16px;
                  margin-right: 5px;
                }
                .icon-shijian {
                  font-size: 14px;
                }
              }
            }
            .compTag {
              font-size: 12px;
              // display: flex;
              // align-items: center;
              color: #333;
              // justify-content: space-between;
              .compTagItem {
                display: flex;
                align-items: center;
                .iconfont {
                  font-size: 16px;
                  margin-right: 5px;
                }
                .icon-shijian {
                  font-size: 14px;
                }
              }
            }
            .compDes {
              font-size: 12px;
              color: #333;
            }
          }
          .workItem {
            width: 30%;
          }
        }
        .productCont {
          width: 100%;
          background-color: #f1f4fb;
          padding: 15px;
          box-sizing: border-box;
          margin-bottom: 15px;
          border-radius: 5px;
          .productHead {
            font-size: 14px;
            font-weight: bold;
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            justify-content: space-between;
          }
          .productDes {
            font-size: 12px;
            color: #333;
            margin-bottom: 5px;
          }
          .productImg {
            margin-top: 10px;
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            position: relative;
            .imgItem {
              width: 40px;
              overflow: hidden;
              margin-left: 10px;
              display: block;
              height: 40px;
              border-radius: 5px;
              // padding: 0.1rem;
              box-sizing: border-box;
              position: relative;
              border: 2px solid #fff;
              margin-bottom: 7px;
              font-size: 0;
              background-size: cover;
            }
            .noLeft {
              margin-left: 0;
            }
          }
        }
        .formHead {
          font-size: 16px;
          font-weight: bold;
          margin-bottom: 10px;
          margin-top: 10px;
        }
      }
    }
  }
}
</style>
